<template>
	<view class="">
		<view class="header flex-column align-center justify-center">
			<u-avatar :src="$companyInfo.logo" size="60"></u-avatar>
			<view class="mt-30 name">欢迎您来到{{$companyInfo.name}}</view>
		</view>
		<view class="content">
			<u-form labelPosition="left" labelWidth="80rpx" :model="form" :rules="rules" ref="form1" errorType="toast">
				<u-form-item leftIcon="phone" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="mobile"
					borderBottom>
					<u-input type="text" v-model="form.mobile" border="none" placeholder="请输入手机号">
						<u-text text="+86" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
					</u-input>
				</u-form-item>
				<u-form-item leftIcon="account" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="username"
					borderBottom>
					<u-input type="text" v-model="form.username" border="none" placeholder="请输入真实姓名"></u-input>
				</u-form-item>
				<view class="mt-10"></view>
				<u-form-item leftIcon="lock" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="password"
					borderBottom>
					<u-input type="password" v-model="form.password" border="none" placeholder="请输入密码"></u-input>
				</u-form-item>
				<view class="mt-10"></view>
				<u-form-item leftIcon="lock" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="newpassword"
					borderBottom>
					<u-input type="password" v-model="form.newpassword" border="none" placeholder="请输入再次密码"></u-input>
				</u-form-item>
				<view class="mt-10"></view>
				<u-form-item leftIcon="heart" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="code" borderBottom>
					<u-input type="text" v-model="form.code" border="none" placeholder="请输入邀请码"></u-input>
				</u-form-item>
				<u-form-item leftIcon="heart" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="captcha"
					borderBottom>
					<u-input type="text" v-model="form.captcha" border="none" placeholder="请输入验证码">
						<template slot="suffix">
							<view @click="generateCaptcha">
								<canvas canvas-id="captchaCanvas" style="width: 150px; height: 40px;"></canvas>
							</view>
						</template>
					</u-input>
				</u-form-item>
			</u-form>

			<view class="submit">
				<u-button @click="register" type="primary" shape="circle" text="注册"></u-button>
				<navigator hover-class="none" url="/pages/common/login" class="mt-30 text-center">
					登陆
				</navigator>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import form from '../../uni_modules/uview-ui/libs/config/props/form'
	import {
		register,
		captcha
	} from '@/common/api.js'
	import {
		baseUrl
	} from '@/common/config.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				captcha: "",
				src: '',
				text: '无头像',
				form: {
					mobile:"",
					username: "",
					password: "",
					newpassword: "",
					code: "",
					captcha: "",
					id: "",
				},
				rules: {
					mobile: [{
							required: true,
							message: '请填写账号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					username: {
						type: 'string',
						required: true,
						message: '请填写真实姓名',
						trigger: ['blur']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur']
					},
					newpassword: [{
							required: true,
							message: '请输入再次密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value == this.form.password;
							},
							message: '两次密码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					code: {
						type: 'string',
						required: true,
						message: '请填写邀请码',
						trigger: ['blur']
					},
					captcha:[{
							required: true,
							message: '请填写验证码',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return value === this.captcha;
							},
							message: '验证码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					
					
				}
			}
		},
		  mounted() {
		    this.generateCaptcha(); // 组件加载时生成验证码
		  },
		onLoad() {
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			generateCaptcha() {
				const canvas = uni.createCanvasContext('captchaCanvas', this);
				const text = this.generateRandomText(); // 生成随机文本
				this.captcha = text; // 存储验证码文本
				this.drawCaptcha(canvas, text); // 绘制验证码
				canvas.draw(); // 绘制到canvas上
			},
			generateRandomText() {
				const chars = '0123456789';
				let result = '';
				for (let i = 0; i < 6; i++) { // 生成6位验证码
					result += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return result;
			},
			drawCaptcha(canvas, text) {
				canvas.setFillStyle('#000'); // 设置文字颜色为黑色
				canvas.setFontSize(30); // 设置字体大小
				canvas.fillText(text, 10, 40); // 在画布上绘制文字
				this.drawDisturbLines(canvas); // 绘制干扰线
			},
			drawDisturbLines(canvas) {
				canvas.setStrokeStyle('#ccc'); // 设置线条颜色为灰色
				for (let i = 0; i < 5; i++) { // 绘制5条干扰线
					canvas.beginPath();
					canvas.moveTo(Math.random() * 200, Math.random() * 60); // 随机起点
					canvas.lineTo(Math.random() * 200, Math.random() * 60); // 随机终点
					canvas.stroke(); // 绘制线条
				}
			},
			register() {
				let vm = this;
				
				this.$refs.form1.validate().then(res => {
					register(this.form).then(res => {
						vm.$refs.uToast.show({
							type: 'success',
							message: '注册成功',
							complete() {
								vm.loading = false
								uni.redirectTo({
									url: '/pages/common/login'
								})
							}
						})
					}).catch(err => {
						vm.loading = false
					})
				}).catch(err => {
					vm.loading = false
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.header {
		background: url('/static/img/bg_login.png') no-repeat;
		background-size: 100% 100%;
		height: 400rpx;
	}

	.name {}

	.content {
		padding: 60rpx;
	}

	.submit {
		margin-top: 90rpx;
	}
</style>